<template>
  <view class="apply-friend-page">
    <view class="input-group">
      <text>好友ID：</text>
      <input 
        v-model="friendUserId" 
        placeholder="请输入对方的用户ID"
        type="text"
      />
    </view>
    <view class="input-group">
      <text>申请留言：</text>
      <textarea 
        v-model="applyMsg" 
        placeholder="请输入申请留言（可选）"
        rows="3"
      ></textarea>
    </view>
    <button 
      class="submit-btn"
      @click="handleApply"
      :loading="isLoading"
    >
      发送好友申请
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      friendUserId: '', // 目标好友ID（可通过搜索/扫码获取）
      applyMsg: '', // 申请留言
      isLoading: false // 加载状态
    }
  },
  methods: {
    async handleApply() {
      // 前端校验
      if (!this.friendUserId.trim()) {
        uni.showToast({ title: '请输入好友ID', icon: 'none' })
        return
      }

      this.isLoading = true
      try {
        // 调用云对象的applyAddFriend方法
        const linli = uniCloud.importObject('linliChat',{customUI:true}) // 导入云对象
        const res = await linli.applyAddFriend({
          friendUserId: this.friendUserId.trim(),
          applyMsg: this.applyMsg.trim()
        })

        if (res.success) {
          uni.showToast({ title: '申请已发送', icon: 'success' })
          // 重置表单或返回上一页
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        }
      } catch (err) {
        // 捕获错误（如重复申请、用户不存在等）
        uni.showToast({ title: err.message || '申请失败', icon: 'none' })
        console.error('申请好友失败：', err)
      } finally {
        this.isLoading = false
      }
    }
  }
}
</script>

<style scoped>
.input-group {
  margin: 20rpx;
  padding: 20rpx;
  border-bottom: 1px solid #eee;
}
.input-group text {
  display: block;
  margin-bottom: 10rpx;
  color: #666;
}
.input-group input,
.input-group textarea {
  width: 100%;
  padding: 15rpx;
  border: 1px solid #ddd;
  border-radius: 8rpx;
}
.submit-btn {
  margin: 40rpx 20rpx;
  background-color: #007aff;
  color: white;
}
</style>